{% extends 'myadmin/index.html' %}
{% block con %}
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div class="card card-tasks">
                    <div class="card-header ">
                        <h4 class="card-title">分类列表</h4>
                        <p class="card-category">To Do List</p>
                    </div>

                    <div class="card-body ">
                        <div class="table-full-width">
                            <table class="table">
                                <thead>
                                <tr>
                                    <th>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input  select-all-checkbox" type="checkbox"
                                                       data-select="checkbox" data-target=".task-select">
                                                <span class="form-check-sign"></span>
                                            </label>
                                        </div>
                                    </th>
                                    <th>ID</th>
                                    <th>商品名称</th>
                                    <th>商品标题</th>
                                    <th>所属分类</th>
                                    <th>商品原价</th>
                                    <th>商品价格</th>
                                    <th>商品数量</th>
                                    <th>封面图</th>
                                    <th>商品状态</th>
                                    <th style="text-align: center;">操作</th>
                                </tr>
                                </thead>
                                <tbody  id="app">
                                {% for v in goodslist %}
                                <tr>
                                    <td>
                                        <div class="form-check">
                                            <label class="form-check-label">
                                                <input class="form-check-input task-select" type="checkbox">
                                                <span class="form-check-sign"></span>
                                            </label>
                                        </div>
                                    </td>
                                    <td>{{v.id}}</td>
                                    <td>{{v.goodsname}}</td>
                                    <td>{{v.title}}</td>
                                    <td>{{v.cateid}}</td>
                                    <td>{{v.oldprice}}</td>
                                    <td>{{v.price}}</td>
                                    <td>{{v.goodsnum}}</td>
                                    <td>{{v.pic}}</td>
                                    <td>{{v.status}}</td>

                                    <td class="td-actions text-right">
                                        <div class="form-button-action" style="width:60%; margin:0 auto">
                                            <a href="{% url 'user_edit'%}?uid={{v.id}}" data-toggle="tooltip"
                                               title="Edit Task"
                                               class="btn btn-link btn-simple-primary">
                                                <i class="la la-edit"></i>
                                            </a>
                                            <a href="javascript:void(0)" cid="{{ v.id }}" title="Remove"
                                               class="btn btn-link btn-simple-danger removeCate">
                                                <i class="la la-times"></i>
                                            </a>
                                        </div>
                                    </td>
                                </tr>
                                {% endfor %}

                                </tbody>
                            </table>

                        </div>
                    </div>
                    <div class="card-footer ">
                        <div class="stats">
                            <i class="now-ui-icons loader_refresh spin"></i>
                            <div class="card-body">

                                <ul class="pagination pg-primary">


                                </ul>

                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
<script src="/static/myadmin/assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    $('.cate_name').dblclick(function(){
        // 1 绑定双击事件,获取name换成input
        var span = $(this).find('span')
        // 获取当前分类名字
        var catename = span.text()
        // 创建一个 input
        var inp = $('<input type="text" style="color:black;" value="'+catename+'">')
        // 把分类名换成input
        $(this).find('span').html(inp)
        // 让input中的值 处于选中状态
        inp.select()
        // 获取当前选择的元素的 分类 id
        var cid = span.attr('cid')

        // 2,给input绑定丧失焦点事件,判断是否更新了name,发送ajax去修改
        inp.blur(function(){
            // 获取当前新的name
            var newname = $(this).val()
            // 判断当前的值和原来的值是否一样
            if(newname == catename){
                // 不需要修改,恢复原样
                span.html(catename)
            }else{
                // 需要发送ajax去更新
                $.get('{% url 'cates_edit' %}',{'cid':cid,'newname':newname},function(data){
                    // 判断是否更新成功
                    if(data['code'] == 0){
                        span.html(newname)
                        alert(data['msg'])
                    }
                },'json')
            }
        })
    })

    // 删除
    $('.removeCate').click(function(){
        // 获取当前选择的分类的id
        var cid = $(this).attr('cid')
        var a = $(this)
        console.log(111)
        // 发送ajax请求.到后台执行删除
        $.get('{% url 'cates_del' %}',{'cid':cid},function(data){
            console.log(data)
            // 判断当前的返回值
            if(data['code'] == 0){
                // 删除成功
                // $(this).parents('tr').remove()
                //  此处的 $(this) 是谁? ajax对象 XMLHttpRequest
                a.parents('tr').remove()
            }
            alert(data['msg'])
        },'json')


    })

    </script>
    {% endblock %}